<template>
  <div class="screen-center" id="map-container">
    <screen-left></screen-left>
    <screen-right></screen-right>
    <station-info-dialog></station-info-dialog>
    <bus-info-dialog></bus-info-dialog>
    <driver-info-dialog></driver-info-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import screenLeft from '../screenLeft/index.vue'
import screenRight from '../screenRight/index.vue'
// @ts-ignore
import BusWay from '../../basic/BusWay.js'
import stationInfoDialog from './stationInfoDialog.vue'
import busInfoDialog from './busInfoDialog.vue'
import driverInfoDialog from './driverInfoDialog.vue'
let BusWayMap: any = ''
@Component({
  name: 'screen-center',
  components: {
    screenLeft,
    screenRight,
    stationInfoDialog,
    busInfoDialog,
    driverInfoDialog
  }
})

export default class ScreenCenter extends Vue {
  mounted () {
    BusWayMap = new BusWay()
  }
  beforeDestroy() {
    BusWayMap.removeBusWayModule()
  }
}
</script>

<style lang="scss" scoped>
.screen-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  overflow: hidden;
}
</style>
